<html>
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<style>
		body {
			font-family: Arial;
		}
		td {
			padding : 1em;
		}
	</style>
	<script type="text/javascript">
		var CLIENT_ID = '545290267853-fc804hsas0mvaj35rh87l9r5dduentio.apps.googleusercontent.com';
		var SCOPES = 'https://www.googleapis.com/auth/drive';

		function handleClientLoad() {
			window.setTimeout(checkAuth, 1);
		}

		function checkAuth() {
			gapi.auth.authorize(
				{'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true},
				handleAuthResult);
		}

		function handleAuthResult(authResult) {
			var status = document.getElementById('status');
			if (authResult && !authResult.error) {
				// Access token has been successfully retrieved, requests can be sent to the API.
				showFiles();
			} else {
				// No access token could be retrieved, show the button to start the authorization flow.
				status.innerHTML = "NOT Authorized.";
				authorize();
			}
		}
      
		function authorize() {
			gapi.auth.authorize(
				{'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': false},
				handleAuthResult);
		}
	  
		function showFiles() {
			gapi.client.load('drive', 'v2', function() {
          		var status = document.getElementById('status');
				retrieveAllFiles(
				function(result) {
					var str = "<table>";
					for (var i=0; i < result.length; i++) {
						if ( result[i] != null ) {
							var extension = result[i].fileExtension;
							if ( extension == "png" || extension == "jpg" || extension == "jpeg" || extension == "gif" || 
								extension == "avi" || extension == "mp3" || extension == "mp4" || 
								extension == "doc" || extension == "docx" || extension == "xls" || extension == "xlsx" || extension == "ppt" || extension == "pptx" )
							{
								var name = result[i].originalFilename;
								var size = result[i].fileSize;
								var iconLink = result[i].iconLink;
								var downloadUrl = result[i].downloadUrl;
								var webContentLink = result[i].webContentLink;
								var thumbnailLink = result[i].thumbnailLink;
								var stringToRemove = "=s";
								if ( thumbnailLink != null ) {
									var pos = thumbnailLink.indexOf(stringToRemove);
									thumbnailLink = thumbnailLink.substring(0, pos) + "=s1024";
									str += "<tr>" + 
										"<td><img src='" + iconLink + "' /></td>" + 
										"<td><a href='" + thumbnailLink + "|" + name + "'>" + name + " (" + size+ " bytes)</a>" +
										"</tr>";
								}
							}
						}
					}
					status.innerHTML = str + "</table>";
				});
			});
		}
	  
		function retrieveAllFiles(callback) {
			var retrievePageOfFiles = function(request, result) {
				request.execute(function(resp) {
					result = result.concat(resp.items);
					var nextPageToken = resp.nextPageToken;
					if (nextPageToken) {
						request = gapi.client.drive.files.list({
							'pageToken': nextPageToken
						});
						retrievePageOfFiles(request, result);
					} else {
						callback(result);
					}
				});
			}
			var initialRequest = gapi.client.drive.files.list();
			retrievePageOfFiles(initialRequest, []);
		}
	</script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
</head>
<body onLoad="checkAuth()">
	<div id="status"><h3>Listing your files. Please wait...</h3></div>
</body>
</html>